<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/ydui.flexible.js"></script>
  <link rel="stylesheet" href="./css/ydui.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>

  <div class="m-tab" data-ydui-tab>
    <ul class="tab-nav">
        <li class="tab-nav-item tab-active"><a href="javascript:;">图源信息</a></li>
        <li class="tab-nav-item"><a href="javascript:;">搜索规则</a></li>
        <li class="tab-nav-item"><a href="javascript:;">推荐规则</a></li>
        <li class="tab-nav-item"><a href="javascript:;">详情规则</a></li>
    </ul>
    <div class="tab-panel scrolltab-content" style="background-color: #f5f5f5;padding:0;">
        <div class="tab-panel-item tab-active">
          <!-- 图源名称 -->
          <div class="m-celltitle">图源名称(comicSourceName)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入图源名称" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 图源地址 -->
          <div class="m-celltitle">图源地址(comicSourceUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入图源地址" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 图片请求头 -->
          <div class="m-celltitle">图片请求头(imgHeaders)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                    <textarea class="cell-textarea" placeholder="请输入图片请求头"></textarea>
                </div>
            </div>
          </div>
          <!-- 图源排序 -->
          <div class="m-celltitle">图源排序(sort)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="图源排序" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 图源分类 -->
          <div class="m-celltitle">图源排序(type)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="图源type排序(type是唯一的)" autocomplete="off">
                </div>
            </div>
          </div>
          
          <button type="button" class="btn-block btn-danger">下一步</button>

        </div>
        <div class="tab-panel-item">
          <!-- 搜索作者 -->
          <div class="m-celltitle">搜索作者(ruleSearchAuthor)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入搜索作者" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- ruleSearchCid -->
          <div class="m-celltitle">搜索Cid(ruleSearchCid)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入搜索Cid" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- ruleSearchCoverUrl -->
          <div class="m-celltitle">搜索封面(ruleSearchCoverUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入搜索封面" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- ruleSearchList -->
          <div class="m-celltitle">搜索列表(ruleSearchList)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入搜索列表" autocomplete="off">
                </div>
            </div>
          </div>


          <!-- ruleSearchTitle -->
          <div class="m-celltitle">搜索列表(ruleSearchTitle)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入搜索标题" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- ruleSearchTitle -->
          <div class="m-celltitle">搜索更新(ruleSearchUpdate)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入搜索更新" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- ruleSearchUrl -->
          <div class="m-celltitle">搜索请求url(ruleSearchUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="搜索请求url" autocomplete="off">
                </div>
            </div>
          </div>
          <button type="button" class="btn-block btn-danger">下一步</button>
        </div>
        <div class="tab-panel-item">
          <div class="m-celltitle">推荐作者(ruleFindAuthor)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入推荐作者" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 推荐cid -->
          <div class="m-celltitle">推荐Cid(ruleFindCid)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入推荐Cid" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 推荐封面 -->
          <div class="m-celltitle">推荐Cid(ruleFindCoverUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入推荐封面" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- 推荐列表 -->
          <div class="m-celltitle">推荐列表(ruleFindList)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入推荐列表" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- 推荐标题 -->
          <div class="m-celltitle">推荐标题(ruleFindTitle)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入推荐标题" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- 推荐标题 -->
          <div class="m-celltitle">推荐更新(ruleFindUpdate)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入推荐更新" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- 推荐分类 -->
          <div class="m-celltitle">推荐更新(ruleFindUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <textarea class="cell-textarea" placeholder="漫画推荐分类列表"></textarea>
                </div>
            </div>
          </div>
          <button type="button" class="btn-block btn-danger">下一步</button>
        </div>
        <div class="tab-panel-item">
           <!-- 漫画详情地址 -->
          <div class="m-celltitle">漫画详情地址(ruleComicInfoUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情地址" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 漫画详情标题 -->
          <div class="m-celltitle">漫画详情标题(ruleComicTitle)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情标题" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 漫画详情作者 -->
          <div class="m-celltitle">漫画详情作者(ruleComicAuthor)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情作者" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 漫画详情封面 -->
          <div class="m-celltitle">漫画详情封面(ruleComicCover)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情封面" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 漫画详情简介 -->
          <div class="m-celltitle">漫画详情简介(ruleComicInstro)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情简介" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 漫画详情简介 -->
          <div class="m-celltitle">漫画详情更新(ruleComicUpdate)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情更新" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 漫画详情章节列表 -->
          <div class="m-celltitle">漫画详情章节列表(ruleChapterList)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情章节列表" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 漫画详情章节列表名称 -->
          <div class="m-celltitle">漫画详情章节列表名称(ruleChapterName)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情章节列表名称" autocomplete="off">
                </div>
            </div>
          </div>
        <!-- 漫画详情章节列表地址 -->
          <div class="m-celltitle">漫画详情章节列表地址(ruleChapterUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入漫画详情章节列表地址" autocomplete="off">
                </div>
            </div>
          </div>

          <!-- 漫画详情章节列表ajax地址 -->
          <div class="m-celltitle">漫画详情章节列表(ruleChapterAjax)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <textarea class="cell-textarea" placeholder="章节列表ajax"></textarea>
                </div>
            </div>
          </div>
          <!-- 图片内容详情地址 -->
          <div class="m-celltitle">漫画详情章节列表地址(ruleContentUrl)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <input type="text" class="cell-input" placeholder="请输入图片内容详情地址" autocomplete="off">
                </div>
            </div>
          </div>
          <!-- 图片详情解析 -->
          <div class="m-celltitle">漫画解析列表(ruleComicContent)</div>
          <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                  <textarea class="cell-textarea" placeholder="漫画解析列表"></textarea>
                </div>
            </div>
          </div>
          <button type="button" class="btn-block btn-danger">开始测试</button>
        </div>
    </div>
</div>

  

  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="./js/ydui.js"></script>

  <script>

     /**
     * Javascript API调用Tab
     */
     !function ($) {
        var $tab = $('#J_Tab');

        var height = $(window).height();
        var innerHeight = height - $(".tab-nav").height()-5;
        $(".tab-panel").height(innerHeight);

        $tab.tab({
            nav: '.tab-nav-item',
            panel: '.tab-panel-item',
            activeClass: 'tab-active'
        });

        /*
         $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
             console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
         });
         */

        $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
            console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
        });
    }(jQuery);

  </script>

</body>
</html>